<template>
  <div v-if="!Weixin_" v-show="showHeader" class="header"
    :style="{ background: background,paddingTop:height - 48 +'px'}">
    <div class="wid96">
      <div class="back_" @click="backAcitonFun">
        <img v-if="image_=='0'" :src="require('@/assets/images/public/fanhui_hei.png')" alt="" />
        <img class="back_trfom" v-else :src="require('@/assets/images/activity/wealth_back_icon@2x.png')" alt="" />
      </div>
      <div class="title" :style="{ color: color,fontSize:size }">
        <slot>{{title}}</slot>
        <slot name="taber_tab"></slot>
      </div>
      <div class="share">
        <slot name="share"></slot>
        <slot name="share_dian"></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    inject,
    onMounted,
    ref
  } from 'vue'
  import {
    backAciton
  } from '@/util/common'
  import Vconsole from 'vconsole'
  let vConsole = new Vconsole()
  //  :Weixin_="true"  true小程序隐藏自定义头部false显示
  export default defineComponent({
    props: {
      Weixin_: {
        type: Boolean,
        default: false,
      }, //是否微信浏览器
      title: {
        type: String,
        default: '',
      },
      background: {
        type: String,
        default: '',
      },
      color: {
        type: String,
        default: '',
      },
      image_: {
        type: String,
        default: '',
      }, //0黑1白
      size: {
        type: String,
        default: '',
      },
      needScrollShow: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const showHeader = ref < boolean > (true)
      const height = inject('getHeight')
      const showSearch = (): void => {
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 150) {
          showHeader.value = true
        } else {
          showHeader.value = false
        }
      }
      onMounted(() => {
        if (props.needScrollShow) {
          showHeader.value = false
          window.addEventListener("scroll", showSearch);
        }
      })
      const backAcitonFun = (): void => {
        backAciton()
      }
      // const height = ref < number > (0)
      // const u = navigator.userAgent;
      // const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // const sendStatusBarHeight: (statusHeight: number) => void = (statusHeight: number) => {
      //   height.value = statusHeight + 48
      // }
      // if (isiOS) {  
      //   if ((window as any).webkit) { 
      //     (window as any).sendStatusBarHeight = sendStatusBarHeight;
      //     (window as any).webkit.messageHandlers.getStatusBarHeight.postMessage({});
      //   } 
      // } else {
      //   if ((window as any).app.getStatusBarHeight) {
      //     height.value = (window as any).app.getStatusBarHeight() / (window as any).devicePixelRatio + 48
      //   }
      // } 
      return {
        height,
        showHeader,
        backAcitonFun
      }
    }
  })
</script>

<style lang="less" scoped>
  @import './HeaderComponent.less';
</style>